@import '@devui/theme/styles-var/devui-var.scss';

.#{$devui-prefix}-color-picker {
  position: relative;

  &-position {
    position: absolute;
    z-index: $devui-z-index-function-widget;
    background-color: $devui-connected-overlay-bg;
  }

  &-color-value {
    display: flex;
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: rgb(204, 15, 15);
  }

  &-container {
    padding: 3px;
    border: 1px solid rgb(224, 224, 230);
    border-radius: 3px;

    &-wrap {
      width: 100%;
      height: 26px;
      box-sizing: content-box;
      box-shadow: 3px 0 5px #00000014;
      position: relative;
      cursor: pointer;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;

      &-current-color {
        top: 0;
        right: 0;
        left: 0;
        position: absolute;
        z-index: 3;
        width: 100%;
        height: 100%;
      }

      &-current-color-transparent {
        top: 0;
        right: 0;
        left: 0;
        overflow: hidden;
        padding: 3px;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
      }

      &-transparent {
        background-image: url();
        background-repeat: repeat;
      }
    }
  }
}

.color-picker-transition-enter-from,
.color-picker-transition-leave-to {
  opacity: 0;
}

.color-picker-transition-enter-to,
.color-picker-transition-leave-from {
  opacity: 1;
}

.color-picker-transition-enter-active,
.color-picker-transition-leave-active {
  transition: opacity 0.2s ease-in-out;
}
